<template>
  <div class="dashboard-container">
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="100px">
            <el-row :gutter="12">
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="选择省份" prop="stdCode">
                  <el-select v-model="searchForm.provinceCode" placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in provOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="选择查看类型" prop="stdCode">
                  <el-select v-model="searchForm.type" placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="选择日期" prop="endRptMon">
                  <el-date-picker
                    v-model="searchForm.beginTime"
                    type="date"
                    placeholder="选择日期"/>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="选择日期" prop="endRptMon">
                  <el-date-picker
                    v-model="searchForm.beginTime"
                    type="date"
                    placeholder="选择日期"/>
                </el-form-item>
              </el-col> -->
              <el-col :md="12" :lg="8" :xl="6" style="text-align:right;float:right;">
                <el-button @click="restSearch">重置</el-button>
                <el-button type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">全国调用趋势分析</span>
          <!-- <div class="box-tools">
            <el-button type="primary" @click="getUseTrend('hour')">每月</el-button>
            <el-button type="primary" @click="getUseTrend('day')">每日</el-button>
            <el-button type="primary" @click="getUseTrend('month')">每小时</el-button>
          </div> -->
        </div>
        <div class="box-body">
          <div class="echarts-box">
            <line-chart ref="myLinechart" :person="person" />
          </div>
        </div>
      </div>
    </section>
    <div class="echart-list">
      <el-row :gutter="12">
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div class="echart-list-item">
            <keep-alive>
              <section class="layer">
                <div class="box">
                  <div class="box-header">
                    <span class="box-title">中心调用排行</span>
                  </div>
                  <div class="box-body">
                    <div class="echarts-box">
                      <radar-chart />
                    </div>
                  </div>
                </div>
              </section>

            </keep-alive>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div class="echart-list-item">
            <keep-alive>
              <section class="layer">
                <div class="box">
                  <div class="box-header">
                    <span class="box-title">服务调用排行</span>
                  </div>
                  <div class="box-body">
                    <div class="echarts-box">
                      <pies-chart />
                    </div>
                  </div>
                </div>
              </section>
            </keep-alive>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div class="echart-list-item">
            <keep-alive>
              <section class="layer">
                <div class="box">
                  <div class="box-header">
                    <span class="box-title">前端应用排行</span>
                  </div>
                  <div class="box-body">
                    <div class="echarts-box">
                      <bar-chart />
                    </div>
                  </div>
                </div>
              </section>

            </keep-alive>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// 引入折线线图
require('echarts/lib/chart/line')
import LineChart from './components/LineChart'
import RadarChart from './components/RadarChart'
import PiesChart from './components/PiesChart'
import BarChart from './components/BarChart'
// import ApiObj from '@/api/monitoring'
// import { formatTime } from '@/utils/index'
export default {
  name: 'DashboardAdmin',
  components: {
    LineChart,
    RadarChart,
    PiesChart,
    BarChart
  },
  data() {
    return {
      searchForm: {
        type: 'hour',
        provinceCode: 2
      },
      chart: '',
      provOptions: [{ value: 1, label: '北京' }, { value: 2, label: '上海' }],
      typeOptions: [{ value: 'hour', label: '每时' }, { value: 'day', label: '每日' }, { value: 'month', label: '每月' }],
      person: [],
      time: []
    }
  },
  created() {
    // this.getData()
    // this.getUseTrend('hour')
  },
  methods: {
    restSearch() {

    },
    search() {
      this.getLineData(this.searchForm)
    },
    getLineData(params) {
      this.$refs.myLinechart.getUseTrend(params)
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.echarts-box {
  width: 100%;
  height: 348px;
  background-color: #fff;
}
.item-wrap {
  margin-bottom: 10px;
  box-sizing: border-box;
  & .el-row .el-col {
    padding: 10px 20px;
    box-sizing: border-box;
    & .item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 70px;
      padding: 0 20px;
      box-sizing: border-box;
      background-color: #fff;
      color: #666;
      box-shadow: 0 0 10px rgba(10, 10, 10, 0.1);
      cursor: pointer;
      & > i {
        color: rgb(12, 212, 226);
        font-size: 30px;
        transition: 0.5s;
      }
      & > span {
        font-size: 16px;
        font-weight: 700;
      }
    }
    & .item:hover {
      background-color: rgb(236, 246, 255);
    }
  }
}
.echart-list {
  margin-top: 12px;
  & .el-col {
    // margin-bottom: 15px;
    & .echart-list-item {
      height: 300px;
      background-color: #fff;
    }
  }
}
</style>
